import * as THREE from 'three';
import { WebGLRenderer } from 'three';
import { threeExport } from './threeExport';
import { mouseDown,mouseUp,mouseMove } from './threeMouseUtil';
interface rendererUtil { 
    renderer: WebGLRenderer | undefined,
    rendererPrecision: string,
    rendererAlpha: boolean,
    rendererAntialias: boolean,
    shadowMapEnabled: boolean,
    autoClear:boolean
}
export const rendererUtil = <rendererUtil>{
    renderer: undefined,
    rendererPrecision: 'highp',
    rendererAlpha: true,
    rendererAntialias: true,
    shadowMapEnabled: true,
    autoClear:true
}

export function createRenderer() {
     rendererUtil.renderer = new THREE.WebGLRenderer({
        precision:rendererUtil.rendererPrecision,
        alpha:rendererUtil.rendererAlpha,
        antialias: rendererUtil.rendererAntialias,
        // antialias: true,
		// logarithmicDepthBuffer: true,
    });
    rendererUtil.renderer.setPixelRatio( window.devicePixelRatio );
    rendererUtil.renderer.shadowMap.enabled  = rendererUtil.shadowMapEnabled;
    rendererUtil.renderer.autoClear = rendererUtil.autoClear;
    rendererUtil.renderer.outputEncoding = THREE.sRGBEncoding;//調整色彩飽和度
    // renderer.physicallyCorrectLights = false;
    // renderer.toneMappingExposure = 0.1;
    rendererUtil.renderer.setSize(threeExport.width,threeExport.height);
    threeExport.element.appendChild(rendererUtil.renderer.domElement);
    threeExport.element.addEventListener('pointermove', mouseMove, false);
    threeExport.element.addEventListener('pointerup', mouseUp, false);
    threeExport.element.addEventListener('pointerdown', mouseDown, false);
}